<template>
	<view class="pl15 pr15">
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼3层负载分布及排名<span class="fs12">（kW）</span></view>
			</view>
			<view class="">
				<view style="height: 500rpx;width: 100%;">
					<echartsUniapp ref="echarts131" :option="fzOption" canvasId="echarts131"></echartsUniapp>
				</view>
				<view class="">
					<view class="d-flex flex-column j-sb">
						<view class="d-flex a-center mt10" v-for="(item,index) in fzpmData" :key="index">
							<view class="width-30 d-flex a-center font-white">
								<view class="border_three pt5 pb5 pl10 pr10 mr10">{{index + 1}}</view>
								<view class="fs14">{{item.xValue}}</view>
							</view>
							<view class="width-70 d-flex a-center j-sb">
								<view style="width: 300rpx;">
									<u-line-progress :percentage="item.percent" :showText="false" activeColor="#3F7EFF" />
								</view>
								<view class="fs12">{{$formatNumber(item.yValue)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼3层能耗分布及排名<span class="fs12">（kW·H）</span></view>
			</view>
			<view class="">
				<view style="height: 500rpx;width: 100%;">
					<echartsUniapp ref="echarts132" :option="nhOption" canvasId="echarts132"></echartsUniapp>
				</view>
				<view class="">
					<view class="d-flex flex-column j-sb">
						<view class="d-flex a-center mt10" v-for="(item,index) in nhpmData" :key="index">
							<view class="width-30 d-flex a-center font-white">
								<view class="border_two pt5 pb5 pl10 pr10 mr10">{{index + 1}}</view>
								<view class="fs14">{{item.xValue}}</view>
							</view>
							<view class="width-70 d-flex a-center j-sb">
								<view style="width: 280rpx;">
									<u-line-progress :percentage="item.percent" :showText="false" activeColor="#83C95C" />
								</view>
								<view class="fs12">{{$formatNumber(item.yValue)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import echartsUniapp from "@/components/echarts-uniapp/echarts-uniapp.vue"
	import {
		queryOneListLoadByMainPageAppReport,
		queryTwoListLoadByMainPageAppReport,
		queryThreeListLoadByMainPageAppReport,
		queryFourListLoadByMainPageAppReport,
	} from "@/api/dormBuilding/oneBuildThreeFloor.js"
	
	export default {
		components: {
			echartsUniapp
		},
		data() {
			return {
				timeout: null,

				fzOption: {},
				nhOption: {},
				fzpmData: [],
				nhpmData: [],
			}
		},
		created() {

		},
		mounted() {
			this.queryOneListLoadByMainPageAppReport()
			this.queryTwoListLoadByMainPageAppReport()
			this.queryThreeListLoadByMainPageAppReport()
			this.queryFourListLoadByMainPageAppReport()

			// this.setupTimer()
		},
		methods: {
			doRefresh() {
				this.queryOneListLoadByMainPageAppReport()
				this.queryTwoListLoadByMainPageAppReport()
				this.queryThreeListLoadByMainPageAppReport()
				this.queryFourListLoadByMainPageAppReport()
			},
			
			// 设置定时器
			setupTimer() {
				const _this = this;
				_this.timeout = setInterval(() => {
					_this.queryOneListLoadByMainPageAppReport()
					_this.queryTwoListLoadByMainPageAppReport()
					_this.queryThreeListLoadByMainPageAppReport()
					_this.queryFourListLoadByMainPageAppReport()
				}, 10000);
			},
			// 清除定时器
			clearTimer() {
				const _this = this;
				// if (_this.timeout.length > 0) {
				// 	_this.timeout.forEach(item => {
				clearInterval(_this.timeout);
				_this.timeout = null
				// 	})
				// }
			},

			async queryOneListLoadByMainPageAppReport() {
				await queryOneListLoadByMainPageAppReport().then(res => {
					let tempData = res.object || []
					let arrData = []

					for (var i = 0; i < tempData.length; i++) {
						arrData.push({
							value: parseFloat(tempData[i].yValue),
							name: tempData[i].xValue,
						})
					}
					let myData = {
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							top: '5%',
							left: 'center'
						},
						series: [{
							type: 'pie',
							radius: '50%',
							center: ["50%", "60%"],
							data: arrData,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)',
								},
							},
							label: {
								formatter: '{c}'
							},
						}]
					};

					this.fzOption = myData
				})
			},
			async queryTwoListLoadByMainPageAppReport() {
				await queryTwoListLoadByMainPageAppReport().then(res => {
					this.fzpmData = res.object
				})
			},
			async queryThreeListLoadByMainPageAppReport() {
				await queryThreeListLoadByMainPageAppReport().then(res => {
					let tempData = res.object || []
					let arrData = []

					for (var i = 0; i < tempData.length; i++) {
						arrData.push({
							value: parseFloat(tempData[i].yValue),
							name: tempData[i].xValue,
						})
					}
					let myData = {
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							top: '5%',
							left: 'center'
						},
						series: [{
							type: 'pie',
							radius: '50%',
							center: ["50%", "60%"],
							data: arrData,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)',
								},
							},
							label: {
								formatter: '{c}'
							},
						}]
					};

					this.nhOption = myData
				})
			},
			async queryFourListLoadByMainPageAppReport() {
				await queryFourListLoadByMainPageAppReport().then(res => {
					this.nhpmData = res.object
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/floor.css");
</style>